<template>
	<!-- 无缝滚动 -->
	<view>
		<view class="scroll">
			<view id="content" class="sc-list">
				<view v-for="(v,i) in 15" :key="i">这是第{{i}}个滚动哦</view>
			</view>
			<view id="fakeContent"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scList: []
			}
		},
		mounted() {
			// this.initScroll()
		},
		methods: {
			// // 创建滚动需求
			// initScroll() {
			// 	let that = this;
			// 	uni.createSelectorQuery().select('#content').boundingClientRect(function(data) { //data - 各种参数
			// 		console.log(data) // 获取元素的相关信息
			// 		data.top = 50
			// 	}).exec()
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.scroll {
		width: 300rpx;
		height: 100rpx;
		overflow: hidden;
		border: 1rpx solid red;
		margin: 30rpx auto;
		text-align: center;
		position: relative;

		#content {
			position: absolute;
			top: 0;
			animation: playScroll 15s linear infinite;
		}
	}

	@keyframes playScroll {
		0% {
			top: 0;
		}

		100% {
			top: -600rpx;
		}
	}
</style>